<!---
* @Author: yaol
* @Date: 2021-01-18 18:50:43
* @Last Modified by: yaol
* @Last Modified time: 2021-01-18 18:50:43
-->
<!-- 导入错误列表 -->
<template>
  <div class="import-fail">
    <div class="excel-import-data-list">
      <div class="excel-import-data-tab">
        <div class="import-data-toolbar">
          <div class="import-fail__tips">
            <div>
              共导入人员<span class="import-fail__tips--normal">{{ importStat.total }}</span
              >条，其中成功<span class="import-fail__tips--success">{{ importStat.success }}</span
              >条，失败<span class="import-fail__tips--fail">{{ importStat.error }}</span
              >条
            </div>
            <dg-button @click="handleExport" type="text" style="margin-left: auto" :disabled="!importStat.error"
              >导出失败人员
            </dg-button>
          </div>
        </div>
      </div>
      <dg-table
        ref="dataGrid"
        v-clickoutside="handleOutsideClick"
        @header-click="handleOutsideClick"
        class="excel-import-data-table"
        :border="border"
        overflow="origin"
        :url="'/excel-imports/' + id + '/list'"
        :module="module"
        :lazyLoad="false"
        :condition="gridCondition"
        :defaultSort="gridOrder"
        max-height="514"
        @row-click="handleRowClick"
      >
        <dg-table-column
          :width="
            column.width ? column.width : column.type == 'date' && column.format.length > 12 ? 240 : defaultColumnWidth
          "
          :key="column.name"
          :prop="column.name"
          align="center"
          :label="column.display"
          v-for="column in scheme.metadata"
        >
          <template slot-scope="scope">
            <el-tooltip
              :content="
                scope.row.validateResult[column.name]
                  ? scope.row.validateResult[column.name]
                  : scope.row['_' + column.name]
                  ? (scope.row['_' + column.name] || '').toString()
                  : (scope.row[column.name] || '').toString()
              "
              effect="dark"
              class="tooltip"
              placement="top"
              :disabled="tooltipDis"
            >
              <span
                class="tooltip-wrap"
                :class="{ 'error-column': scope.row.validateResult[column.name] }"
                @mouseenter="visibilityChange($event, scope.row, column)"
              >
                <slot :name="'column_' + column.name + '_label'" :row="scope.row" v-if="!scope.row._input">
                  <i class="el-icon-warning-outline" v-show="scope.row.validateResult[column.name]"></i>
                  {{ scope.row['_' + column.name] ? scope.row['_' + column.name] : scope.row[column.name] }}
                </slot>
                <slot :name="'column_' + column.name + '_input'" :row="scope.row" v-if="scope.row._input">
                  <el-input
                    v-model="scope.row[column.name]"
                    :placeholder="'请输入' + column.display"
                    :maxlength="column.maxLength"
                    v-if="column.type == 'char' && column.maxLength > 0"
                  ></el-input>
                  <el-input
                    v-model="scope.row[column.name]"
                    :placeholder="'请输入' + column.display"
                    v-if="column.type == 'char' && column.maxLength <= 0"
                  ></el-input>
                  <dg-tree-drop
                    v-model="scope.row[column.name]"
                    lazyLoad
                    :data="treeData[column.format] ? treeData[column.format] : []"
                    :multiple="column.multiple"
                    :placeholder="'请选择' + column.display"
                    value-name="id"
                    clearable
                    filterable
                    v-if="column.isTree && column.type != 'code'"
                  >
                  </dg-tree-drop>
                  <dg-tree-drop
                    v-model="scope.row[column.name]"
                    :code="column.type == 'code' ? column.format : ''"
                    :props="props"
                    lazy-load
                    filterable
                    clearable
                    value-name="id"
                    :multiple="column.multiple"
                    :placeholder="'请选择' + column.display"
                    style="width: 100%"
                    v-if="column.isTree && column.type == 'code'"
                  ></dg-tree-drop>
                  <dg-select
                    v-model="scope.row[column.name]"
                    :code="column.type == 'code' ? column.format : ''"
                    :enum="column.type == 'enum' ? column.format : ''"
                    :multiple="column.multiple"
                    :placeholder="'请选择' + column.display"
                    clearable
                    filterable
                    collapse-tags
                    v-if="!column.isTree && (column.type == 'code' || column.type == 'enum')"
                  >
                  </dg-select>
                  <el-input-number
                    v-model="scope.row[column.name]"
                    :controls="false"
                    :precision="column.precision"
                    :min="column.min"
                    :max="column.max"
                    v-if="column.type == 'number'"
                  ></el-input-number>
                  <dg-date-picker
                    v-model="scope.row[column.name]"
                    type="datetime"
                    :placeholder="'请选择' + column.display"
                    :value-format="column.format"
                    :format="column.format"
                    v-if="column.type == 'date' && column.format.length > 12"
                  ></dg-date-picker>
                  <dg-date-picker
                    v-model="scope.row[column.name]"
                    type="date"
                    :placeholder="'请选择' + column.display"
                    :value-format="column.format"
                    :format="column.format"
                    v-if="column.type == 'date' && column.format.length <= 12"
                  ></dg-date-picker>
                </slot>
              </span>
            </el-tooltip>
          </template>
        </dg-table-column>
      </dg-table>
    </div>
    <div class="excel-import-footer" v-footer>
      <span @click="handleCancel">
        <slot name="import-select-btn">
          <dg-button type="primary">取消</dg-button>
        </slot>
      </span>
      <span @click="handleImportAll">
        <slot name="import-all-btn">
          <dg-button type="primary">导入</dg-button>
        </slot>
      </span>
    </div>
  </div>
</template>
<script>
import dateUtils from 'ui-jz-v4-common/src/utils/date-utils';
import clickoutside from 'raw-loader!babel-loader!ui-component-v4/lib/dg-directives/clickoutside';
export default {
  name: 'errorList',
  props: {
    importSeq: {
      type: Number | String,
      default: ''
    },
    scheme: {
      type: Object,
      default() {
        return {};
      }
    },
    defaultColumnWidth: {
      type: Number,
      default: ''
    },
    tooltipDisabled: {
      type: Boolean,
      default: false
    },
    importStat: {
      type: Object,
      default() {
        return {};
      }
    },
    treeData: {
      type: Object,
      default() {
        return {};
      }
    },
    excelImportApi: {
      type: Object,
      default() {
        return null;
      }
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      props: {
        value: 'value'
      },
      module: 'BASE_API',
      border: true, // 表格是否显示边框
      resultInfo: {},
      gridCondition: {
        importSeq: {
          value: this.importSeq,
          op: '='
        },
        validate_status: {
          value: 0,
          op: '='
        }
      },
      gridOrder: {
        prop: 'id',
        order: 'ascending'
      },
      showFileName: true,
      tooltipDis: this.tooltipDisabled,
      editingRow: {}, // 正在编辑的行
      oriRow: {} // 编辑前的原始行数据
    };
  },
  directives: {
    clickoutside
  },
  mounted() {
    this.$bus.$on('closeErrorList', () => {
      this.$emit('success');
    });
  },
  beforeDestroy() {
    this.$bus.$off('closeErrorList');
    this.$bus.$off('importAll');
    this.$bus.$off('exportFailData');
    this.$bus.$off('updateData');
    this.$bus.$off('Success');
  },
  methods: {
    /**
     * 导出错误数据
     */
    handleExport() {
      // this.$bus.$emit("exportFailData")
      let fileName =
        '错误数据(' +
        this.scheme.name +
        ')-' +
        dateUtils.format(new Date(), 'yyyyMMddHHmmss') +
        '-' +
        this.importSeq +
        '.' +
        this.scheme.fileType;
      this.excelImportApi.exportErrorData(this.scheme.id, this.importSeq, fileName);
    },
    /**
     * 页面点击如果没在表格内取消编辑
     */
    handleOutsideClick(e) {
      let dataSource = this.$refs.dataGrid.dataSource || [];
      this.$bus.$emit('updateData', this.editingRow, this.oriRow, dataSource);
      this.editingRow = {};
      this.oriRow = {};
      this.tooltipDis = false;
    },
    /**
     *列表单元格点击事件，启用编辑功能
     */
    handleRowClick(row, column, event) {
      if (!column || !column.property) {
        return;
      }
      // 行被点击，保存上一行，启用当前行
      this.tooltipDis = true;
      if (this.editingRow.id != row.id) {
        let dataSource = this.$refs.dataGrid.dataSource || [];
        this.$bus.$emit('updateData', this.editingRow, this.oriRow, dataSource);
        this.$set(row, '_input', true);
        this.editingRow = row;
        this.oriRow = {
          ...row
        };
      }
    },
    handleCancel() {
      this.$emit('success');
    },
    handleImportAll() {
      this.$bus.$emit('importAll');
    },
    visibilityChange(event, row, column) {
      if (row._input) {
        this.tooltipDis = true;
        return;
      }
      if (row.validateResult[column.name]) {
        this.tooltipDis = false;
      } else {
        const ev = event.target || event.srcElement;
        const ev_height = ev.offsetHeight; // 文本的实际高度
        const content_height = ev.scrollHeight; // 文本容器高度
        if (content_height <= ev_height) {
          this.tooltipDis = true;
        } else {
          this.tooltipDis = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.import-fail {
  &__tips {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 34px;

    &--normal {
      color: #0063ea;
    }

    &--success {
      color: #00c08c;
    }

    &--fail {
      color: #fa4040;
    }

    span {
      padding: 0 2px;
    }
  }

  .excel-import-data-list {
    margin-top: 5px;

    .excel-import-data-tab {
      line-height: 40px;

      .el-tabs {
        float: left;
      }

      .el-tabs__header {
        margin: 0px 0px 5px;
      }
    }

    .excel-import-data-table {
      td {
        padding: 0px 0px;
      }

      th {
        padding: 5px 0px;
      }
    }

    .dg-table__pagination {
      padding: 5px;

      .el-pagination__total {
        float: left;
      }
    }

    .el-table .cell {
      padding: 0px;
      line-height: 30px;
    }

    .error-column {
      color: #f56c6c;
      /* border: 1px solid #F56C6C; */
    }

    .tooltip-wrap {
      height: 32px; // 必须要有高度设置，因为tooltip的显示条件是通过高度来判断的
      line-height: 32px;
      display: -webkit-box;
      -webkit-line-clamp: 1; // 因为通过高度所以只显示一行，溢出显示省略号
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all; //英文数字折行
      margin: 1px;
      padding: 0px 5px;
    }

    .validate-status {
      font-size: 22px;
      line-height: 35px;

      &.status-success {
        color: #67c23a;
      }

      &.status-error {
        color: #f5222d;
      }
    }

    .ctr-btn {
      font-size: 20px;
      line-height: 35px;
    }
  }
}
</style>
